{extend name="main"}
{block name="style"}
<style type="text/css">
	.el-tree-node__content {
	    display: flex;
	    align-items: center;
	    height: 40px;
	    cursor: auto;
	}
	.custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: .5rem;
	}
	.w-40px{width: 40px;}
	.w-80px{width: 80px;}
	.w-180px{width: 180px;}
	.w-120px{width: 120px;}
	.w-240px{width: 240px;}
	.minw-200px{min-width: 200px;}
	.grayscale-100{
		-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    	filter: grayscale(100%);
	}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-table
		    :data="tableData"
		    style="width: 100%"
		    row-key="id"
    		stripe
		    lazy
		    :load="initHtml"
		    :tree-props="defaultProps"
		    :row-class-name="tableRowClassName">
		    <el-table-column
		      prop="title"
		      label="分类名称">
		      <template slot-scope="scope">
		      	<el-link :href="'{:config('web.url')}/article/type/'+scope.row.alias+'.html'" target="_blank"
		      	:underline="false"
		      	title="在前台打开" v-if="scope.row.alias">{{scope.row.title}}</el-link>
		      	<el-link :underline="false" v-else>{{scope.row.title}}</el-link>
		      </template>
		    </el-table-column>
		    <el-table-column
		      prop="alias"
		      label="别名"
		      width="200">
		    </el-table-column>
		    <el-table-column
		      label="平台"
		      width="460">
		      <template slot-scope="scope">
		      	<el-tag type="primary" size="mini" class="mr-1" v-if="scope.row.pc_show">PC</el-tag>
		      	<el-tag type="primary" size="mini" class="mr-1" v-if="scope.row.app_show">APP</el-tag>
		      	<el-tag type="primary" size="mini" class="mr-1" v-if="scope.row.h5_show">H5</el-tag>
		      	<el-tag type="primary" size="mini" class="mr-1" v-if="scope.row.mp_show">微信小程序</el-tag>
		      	<el-tag type="primary" size="mini" class="mr-1" v-if="scope.row.alipay_show">支付宝小程序</el-tag>
		      	<el-tag type="primary" size="mini" class="mr-1" v-if="scope.row.baidu_show">百度小程序</el-tag>
		      	<el-tag type="primary" size="mini" class="mr-1" v-if="scope.row.toutiao_show">头条小程序</el-tag>
		      </template>
		    </el-table-column>
		    <el-table-column
		      prop="sort"
		      label="排序"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      label="/"
		      width="160">
		      <template slot-scope="scope">
		      	<div v-if="scope.row.id">
			        <el-button
			            type="primary"
			            size="minism"
			            @click="window.open('/article/editCate/'+scope.row.id)">
			            编辑
			        </el-button>
			        <el-button
			            type="danger"
			            size="minism"
			            :loading="scope.row.loading"
			            @click="delCate(scope.row,scope.$index)">
			            删除
			        </el-button>
		      	</div>
		      	<div v-else class="text-info">已删除</div>
		      </template>
		    </el-table-column>
		</el-table>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			search:{
				cid:0,
			},
			tableData:[],
	        defaultProps: {
	          	label: 'title',
	          	children: 'children',
	          	hasChildren: 'hasChildren'
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	tableRowClassName(scope,rowIndex){
	    		return scope.row.id?'':'grayscale-100'
	    	},
	    	delCate(data,index){
	    		var _this=this;
		        _this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	data.loading=1;
		        	$.getJSON('/article/delCate/'+data.id,function(ret){
		        		data.loading=0;
		        		if (ret) {
		        			if (ret.code == 0) {
		        				data.id=0;
		        			}else{
		        				XYBase.msg(ret.msg);
		        			}
		        		}else{
							XYBase.error(XYBase.config.system_network_error);
		        		}
		        	});
		        }).catch(() => {
    				XYBase.msg('已取消删除');
		        });
	    	},
	      	initHtml(tree, treeNode, resolve) {
	      		var _this=this;
		      	if (typeof tree != "undefined")
		      		_this.search.cid=tree.id;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								if (!_this.search.cid) {
									_this.tableData=ret.data;
								}else{
									resolve(ret.data);
								}
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
	});
</script>
{/block}